<script setup>
import router from "../../../router/index.js";
import MyNav from "../../../components/MyNav.vue";
import MyForm from "../../../components/MyForm.vue";
import {RULE} from "../../../const/index.js";
import {onMounted, reactive, ref} from "vue";
import {simpleListApi, updateApi} from "../../../api/axios.js";
import {getResponseData} from "../../../util/request.js";
import {isNotNull} from "../../../util/index.js";

// 获取当前评论记录
let comment = JSON.parse(sessionStorage.getItem('row'));

/* ==================== 页面常量 ==================== */

// 路径导航
const navItems = [
  {icon: 'Notebook', label: '课程管理'},
  {icon: 'Comment', label: '评论列表', url: '/Comment'},
  {icon: 'Edit', label: '修改评论'},
];

/* ==================== 全查集次 ==================== */

let episodeOptions = ref([]);

/** 全查集次 */
async function listEpisodes() {
  episodeOptions.value = [];
  let res = await simpleListApi(null, {module: 'episode'});
  let data = getResponseData(res);
  if (isNotNull(data)) {
    data.forEach((item) => {
      let episode = {};
      episode['label'] = item['title'];
      episode['value'] = item['id'];
      episodeOptions.value.push(episode);
    });
  }
}

/* ==================== 全查用户 ==================== */

let userOptions = ref([]);

/** 全查用户 */
async function listUsers() {
  userOptions.value = [];
  let res = await simpleListApi(null, {module: 'user'});
  let data = getResponseData(res);
  if (isNotNull(data)) {
    data.forEach((item) => {
      let user = {};
      user['label'] = item['nickname'];
      user['value'] = item['id'];
      userOptions.value.push(user);
    });
  }
}

/* ==================== 修改表单 ==================== */

// 表单项 + 表单值 + 表单规则
let items = ref([
  {
    label: '被评论视频集', prop: 'fkEpisodeId', required: true, span: 12,
    type: 'select', options: episodeOptions, placeholder: '请选择要评论的视频'
  },
  {
    label: '评论人', prop: 'fkUserId', required: true, span: 12,
    type: 'select', options: userOptions, placeholder: '请选择要评论人'
  },
  {label: '评论内容', prop: 'content', type: 'textarea'},
]);
let data = reactive(comment);
let rules = {
  content: RULE.CONTENT
};

/**
 * 修改成功后调用
 *
 * 1. 路由到 Comment 页面
 */
function updateSuccess() {
  router.push('/Comment');
}

/* ==================== 加载函数 ==================== */

onMounted(() => {
  listUsers();
  listEpisodes();
});

</script>

<template>
  <my-nav :items="navItems"/>
  <el-divider/>
  <el-card class="comment-update-card" header="修改评论信息">
    <my-form type="update"
             :items="items"
             :rules="rules"
             :args="{module: 'comment'}"
             :api="updateApi"
             :params="data"
             :callback="updateSuccess"/>
  </el-card>
</template>

<style scoped lang="scss">
.comment-update-card {
  width: 70%; // 宽度
  margin: 20px auto 0; // 外边距
}
</style>